<template>
    <div name="Home">
        <header>
            <div class="arise-east-nav-item">
                <img :src="pictures" alt="" />
                <span>tsinghua-UI</span>
            </div>
            <div class="arise-east-nav-seach">
                <input
                    v-model.trim="RouterNameGeometry"
                    placeholder="搜索文档..."
                    @input="searchVal"
                    autocomplete="off"
                    id="input"
                    @focus="
                        isActive = RouterNameGeometry.length > 0 ? true : false
                    "
                    type="text"
                />
            </div>
            <div class="arise-east-nav-icon">
                <svg
                    t="1636687456165"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="16930"
                    width="30"
                    height="30"
                >
                    <path
                        d="M165.44 79.573333c52.586667-57.813333 133.973333 5.546667 171.093333 51.733334-3.84 1.92-11.413333 5.653333-15.253333 7.573333-35.84-25.92-74.133333-72.533333-123.093333-58.346667-54.506667 45.76-35.413333 125.973333-36.266667 188.373334-2.346667 4.053333-6.933333 12.266667-9.28 16.426666-26.453333-63.36-19.733333-144.853333 12.8-205.76zM660.053333 123.306667c65.173333-25.706667 139.733333-93.653333 210.24-44.48 46.08 61.013333 50.346667 156.906667 15.146667 223.786666l-10.24-19.626666c7.786667-68.266667 29.653333-166.293333-45.866667-205.013334-52.906667 4.8-96.853333 39.146667-146.24 55.573334l-23.04-10.24z"
                        fill="#E28F02"
                        opacity=".98"
                        p-id="16931"
                    ></path>
                    <path
                        d="M198.186667 80.533333c48.96-14.186667 87.253333 32.426667 123.093333 58.346667-35.84 23.04-69.44 49.173333-103.253333 74.986667-12.053333-24.853333-25.173333-50.133333-47.466667-67.52-5.44 34.346667-2.026667 69.013333 2.133333 103.253333-2.773333 4.8-8.106667 14.506667-10.773333 19.306667 0.853333-62.4-18.24-142.613333 36.266667-188.373334zM683.093333 133.546667c49.386667-16.426667 93.333333-50.773333 146.24-55.573334 75.52 38.72 53.653333 136.746667 45.866667 205.013334-2.133333-3.52-6.4-10.666667-8.533333-14.186667-1.493333-41.92 4.586667-88.746667-22.72-124.266667-21.12 16.533333-19.84 48.426667-28.266667 72.213334-39.786667-34.133333-84.48-62.4-132.586667-83.2z"
                        fill="#F0AD54"
                        p-id="16932"
                    ></path>
                    <path
                        d="M336.533333 131.306667c100.586667-42.24 222.08-53.226667 323.52-8l23.04 10.24c48.106667 20.8 92.8 49.066667 132.586667 83.2 16.64 17.706667 33.706667 34.88 50.986667 52.053333 2.133333 3.52 6.4 10.666667 8.533333 14.186667l10.24 19.626666c38.08 66.88 63.786667 141.973333 62.72 219.626667 8.853333 162.56-87.36 322.24-230.293333 397.653333-161.6 88.106667-379.413333 59.413333-508.8-73.066666-151.253333-141.546667-176-392.533333-56.426667-561.493334 2.346667-4.16 6.933333-12.373333 9.28-16.426666 2.666667-4.8 8-14.506667 10.773333-19.306667 14.826667-12.16 30.293333-23.68 45.333334-35.733333 33.813333-25.813333 67.413333-51.946667 103.253333-74.986667 3.84-1.92 11.413333-5.653333 15.253333-7.573333m57.493334 4.906666c-63.466667 17.28-96.746667 91.626667-85.12 152.853334-17.706667 3.306667-31.04 16.32-44.053334 27.733333-48.32 5.333333-99.2 37.44-106.453333 88.853333-2.133333 45.76 38.4 77.653333 77.12 92.8-3.306667 2.88-10.026667 8.746667-13.333333 11.733334-38.933333-2.026667-77.973333-4.053333-116.8 0.426666-5.44 40.96-4.053333 82.773333 3.306666 123.413334 0.106667 0.746667 0.426667 2.346667 0.64 3.093333 10.773333 49.92 37.546667 94.186667 64.213334 136.96 0.426667 0.533333 1.173333 1.706667 1.6 2.24 35.84 45.226667 75.733333 96.533333 134.293333 111.36 55.253333 47.146667 131.52 60.053333 202.56 51.2 70.506667 7.146667 162.026667-4.373333 209.493333-51.733333 60.266667-18.666667 98.346667-75.84 138.133334-121.386667l1.6-2.346667c24.426667-35.093333 41.706667-74.666667 52.8-115.946666 0.213333-0.746667 0.64-2.24 0.746666-2.986667 4.053333-18.56 7.04-37.546667 6.08-56.64l9.706667 0.106667c7.36-138.24-42.56-285.12-152.426667-374.08-103.36-87.573333-254.933333-128.32-384.106666-77.653334z"
                        fill="#FFCE74"
                        p-id="16933"
                    ></path>
                    <path
                        d="M394.026667 136.213333c129.173333-50.666667 280.746667-9.92 384.106666 77.653334 109.866667 88.96 159.786667 235.84 152.426667 374.08l-9.706667-0.106667c-2.026667-16.533333-3.84-33.066667-7.253333-49.28-35.626667 0.64-72.213333 10.026667-106.986667-2.026667-49.386667-13.866667-103.573333-41.066667-153.813333-14.933333-56.106667 38.4-112.64-4.586667-165.546667-24.96-51.946667-19.093333-94.08 25.066667-141.866666 36.266667-39.466667-14.933333-81.28-20.693333-123.2-22.72 3.306667-2.986667 10.026667-8.853333 13.333333-11.733334 73.173333 17.813333 160.533333-17.386667 168.533333-100.053333 11.946667-32.64 13.973333-68.586667 3.52-101.866667-32.32-7.573333-65.706667-6.72-98.666666-7.466666-11.626667-61.226667 21.653333-135.573333 85.12-152.853334m134.08 167.466667c-12.16 44.053333 2.666667 88.96 34.346666 120.64 43.2 101.653333 205.653333 107.946667 267.52 21.653333 21.12-29.973333 4.373333-70.826667-21.76-91.733333-33.813333-31.04-81.6-37.44-125.653333-36.16-44.266667-28.373333-109.12-54.933333-154.453333-14.4zM170.56 146.346667c22.293333 17.386667 35.413333 42.666667 47.466667 67.52-15.04 12.053333-30.506667 23.573333-45.333334 35.733333-4.16-34.24-7.573333-68.906667-2.133333-103.253333zM815.68 216.746667c8.426667-23.786667 7.146667-55.68 28.266667-72.213334 27.306667 35.52 21.226667 82.346667 22.72 124.266667a2131.306667 2131.306667 0 0 1-50.986667-52.053333z"
                        fill="#FDEB78"
                        p-id="16934"
                    ></path>
                    <path
                        d="M528.106667 303.68c45.333333-40.533333 110.186667-13.973333 154.453333 14.4-56.426667 8.533333-117.12 42.666667-120.106667 106.24-31.68-31.68-46.506667-76.586667-34.346666-120.64zM264.853333 316.8c13.013333-11.413333 26.346667-24.426667 44.053334-27.733333 32.96 0.746667 66.346667-0.106667 98.666666 7.466666 10.453333 33.28 8.426667 69.226667-3.52 101.866667-26.133333-53.333333-79.68-85.333333-139.2-81.6z"
                        fill="#FFFFB9"
                        p-id="16935"
                    ></path>
                    <path
                        d="M158.4 405.653333c7.253333-51.413333 58.133333-83.52 106.453333-88.853333 59.52-3.733333 113.066667 28.266667 139.2 81.6-8 82.666667-95.36 117.866667-168.533333 100.053333-38.72-15.146667-79.253333-47.04-77.12-92.8m101.44-70.826666c-35.093333 7.253333-82.88 26.453333-78.72 70.186666-8.64 75.2 93.973333 96.426667 149.013333 74.026667-22.4-20.16-59.626667-36.906667-54.4-73.066667 2.666667-35.2 38.933333-48.533333 65.493334-62.933333-26.56-5.973333-54.08-14.826667-81.386667-8.213333m97.6 43.733333c-29.973333 6.933333 0.426667 51.733333 16.853333 27.626667 20.48-8.746667-2.666667-40-16.853333-27.626667zM562.453333 424.32c2.986667-63.573333 63.68-97.706667 120.106667-106.24 44.053333-1.28 91.84 5.12 125.653333 36.16 26.133333 20.906667 42.88 61.76 21.76 91.733333-61.866667 86.293333-224.32 80-267.52-21.653333m113.386667-88.64c-41.493333 8.213333-94.613333 31.466667-97.173333 79.573333 17.6 73.813333 117.226667 87.36 178.453333 64.213334-22.72-19.093333-55.146667-38.933333-45.013333-74.133334-0.32-33.813333 32.853333-46.186667 56.32-62.186666-30.186667-6.613333-61.653333-15.146667-92.586667-7.466667m119.253333 43.306667c-18.56 4.906667-19.52 36.906667 1.386667 38.506666 29.013333 20.48 30.933333-57.813333-1.386667-38.506666z"
                        fill="#1F1F1F"
                        p-id="16936"
                    ></path>
                    <path
                        d="M259.84 334.826667c27.306667-6.613333 54.826667 2.24 81.386667 8.213333-26.56 14.4-62.826667 27.733333-65.493334 62.933333-5.226667 36.16 32 52.906667 54.4 73.066667-55.04 22.4-157.653333 1.173333-149.013333-74.026667-4.16-43.733333 43.626667-62.933333 78.72-70.186666zM675.84 335.68c30.933333-7.68 62.4 0.853333 92.586667 7.466667-23.466667 16-56.64 28.373333-56.32 62.186666-10.133333 35.2 22.293333 55.04 45.013333 74.133334-61.226667 23.146667-160.853333 9.6-178.453333-64.213334 2.56-48.106667 55.68-71.36 97.173333-79.573333z"
                        fill="#FFFFFF"
                        p-id="16937"
                    ></path>
                    <path
                        d="M357.44 378.56c14.186667-12.373333 37.333333 18.88 16.853333 27.626667-16.426667 24.106667-46.826667-20.693333-16.853333-27.626667zM795.093333 378.986667c32.32-19.306667 30.4 58.986667 1.386667 38.506666-20.906667-1.6-19.946667-33.6-1.386667-38.506666z"
                        fill="#888A8E"
                        p-id="16938"
                    ></path>
                    <path
                        d="M345.386667 532.906667c47.786667-11.2 89.92-55.36 141.866666-36.266667 52.906667 20.373333 109.44 63.36 165.546667 24.96 77.12 41.493333 111.146667 141.333333 101.973333 225.6 1.493333 50.133333-48.32 88.853333-33.28 139.946667-47.466667 47.36-138.986667 58.88-209.493333 51.733333-71.04 8.853333-147.306667-4.053333-202.56-51.2-15.146667-57.6-46.293333-108.693333-68.693333-163.2 3.413333-34.24 40.853333-40.746667 66.453333-52.586667-8.213333-21.333333-24.32-40.426667-25.92-63.786666 5.546667-34.666667 33.386667-60.906667 64.106667-75.2m-9.92 38.08c-44.266667 7.466667-25.813333 66.24 0.106666 85.12 36.906667 22.613333 50.24 64.746667 67.733334 101.76-54.4 28.16-105.173333-10.986667-135.786667-53.546667-22.186667 21.653333 13.333333 50.666667 29.866667 65.386667 51.093333 42.346667 115.413333-4.266667 171.946666 15.786666 66.133333 12.693333 158.72-12.586667 181.653334-81.92-32.32 5.76-51.093333 37.226667-81.173334 48.533334-53.866667 24.853333-135.466667 23.04-164.373333-37.76-38.08-53.013333 68.266667-77.226667 45.12-130.133334-29.44-28.16-78.08-14.186667-115.093333-13.226666z"
                        fill="#FFFFB9"
                        p-id="16939"
                    ></path>
                    <path
                        d="M105.386667 510.613333c38.826667-4.48 77.866667-2.453333 116.8-0.426666 41.92 2.026667 83.733333 7.786667 123.2 22.72-30.72 14.293333-58.56 40.533333-64.106667 75.2 1.6 23.36 17.706667 42.453333 25.92 63.786666-25.6 11.84-63.04 18.346667-66.453333 52.586667 22.4 54.506667 53.546667 105.6 68.693333 163.2-58.56-14.826667-98.453333-66.133333-134.293333-111.36-0.426667-0.533333-1.173333-1.706667-1.6-2.24-26.666667-42.773333-53.44-87.04-64.213334-136.96-0.213333-0.746667-0.533333-2.346667-0.64-3.093333-7.36-40.64-8.746667-82.453333-3.306666-123.413334zM652.8 521.6c50.24-26.133333 104.426667 1.066667 153.813333 14.933333 34.773333 12.053333 71.36 2.666667 106.986667 2.026667 3.413333 16.213333 5.226667 32.746667 7.253333 49.28 0.96 19.093333-2.026667 38.08-6.08 56.64-0.106667 0.746667-0.533333 2.24-0.746666 2.986667-11.093333 41.28-28.373333 80.853333-52.8 115.946666l-1.6 2.346667c-39.786667 45.546667-77.866667 102.72-138.133334 121.386667-15.04-51.093333 34.773333-89.813333 33.28-139.946667 9.173333-84.266667-24.853333-184.106667-101.973333-225.6z"
                        fill="#FFFF9F"
                        p-id="16940"
                    ></path>
                    <path
                        d="M335.466667 570.986667c37.013333-0.96 85.653333-14.933333 115.093333 13.226666 23.146667 52.906667-83.2 77.12-45.12 130.133334 28.906667 60.8 110.506667 62.613333 164.373333 37.76 30.08-11.306667 48.853333-42.773333 81.173334-48.533334-22.933333 69.333333-115.52 94.613333-181.653334 81.92-56.533333-20.053333-120.853333 26.56-171.946666-15.786666-16.533333-14.72-52.053333-43.733333-29.866667-65.386667 30.613333 42.56 81.386667 81.706667 135.786667 53.546667-17.493333-37.013333-30.826667-79.146667-67.733334-101.76-25.92-18.88-44.373333-77.653333-0.106666-85.12m82.026666 28.693333c-4.586667 17.6 1.6 23.04 18.453334 16.213333 4.693333-17.92-1.493333-23.36-18.453334-16.213333z"
                        fill="#7D180F"
                        p-id="16941"
                    ></path>
                    <path
                        d="M417.493333 599.68c16.96-7.146667 23.146667-1.706667 18.453334 16.213333-16.853333 6.826667-23.04 1.386667-18.453334-16.213333z"
                        fill="#FFFFFF"
                        p-id="16942"
                    ></path>
                    <path
                        d="M108.693333 634.026667zM914.026667 647.466667c0.213333-0.746667 0.64-2.24 0.746666-2.986667-0.106667 0.746667-0.533333 2.24-0.746666 2.986667zM859.626667 765.76l1.6-2.346667-1.6 2.346667zM173.546667 774.08c0.426667 0.533333 1.173333 1.706667 1.6 2.24-0.426667-0.533333-1.173333-1.706667-1.6-2.24z"
                        fill="#FFFFB9"
                        p-id="16943"
                    ></path>
                </svg>
            </div>
        </header>
        <transition name="fade">
            <div class="ds-Template" v-show="isActive" id="moreBox">
                <div class="Documentation">Documentation</div>
                <div class="ds-layout">
                    <routingQuery
                        id="search"
                        :listGeometry="listGeometry"
                        :RouterList="$router.options.routes"
                        @updateRef="updateRef"
                    />

                    <div class="ds-svg">
                        <div>
                            <img :src="picture" alt="" />
                            <svg
                                t="1637226657802"
                                class="icon ds-formHome"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="2664"
                                width="30"
                                height="30"
                            >
                                <path
                                    d="M916.115386 467.228307 557.971519 467.228307 557.971519 109.085464c0-24.714891-20.056801-44.771693-44.770669-44.771693-24.715915 0-44.772716 20.056801-44.772716 44.771693l0 358.142843L110.285291 467.228307c-24.715915 0-44.771693 20.056801-44.771693 44.771693s20.056801 44.772716 44.771693 44.772716l358.142843 0 0 358.143866c0 24.761963 20.056801 44.770669 44.772716 44.770669 24.713868 0 44.770669-20.008706 44.770669-44.770669L557.971519 556.772716l358.143866 0c24.762987 0 44.771693-20.057825 44.771693-44.772716S940.878372 467.228307 916.115386 467.228307L916.115386 467.228307zM916.115386 467.228307"
                                    p-id="2665"
                                    fill="#8a8a8a"
                                ></path>
                            </svg>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="70"
                                height="70"
                                viewBox="0 0 128 128"
                                version="1.1"
                            >
                                <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
                                <title>Vue</title>
                                <desc>Created with Sketch.</desc>
                                <defs>
                                    <linearGradient
                                        x1="69.644116%"
                                        y1="0%"
                                        x2="69.644116%"
                                        y2="100%"
                                        id="linearGradient-1"
                                    >
                                        <stop
                                            stop-color="#29CDFF"
                                            offset="0%"
                                        />
                                        <stop
                                            stop-color="#148EFF"
                                            offset="37.8600687%"
                                        />
                                        <stop
                                            stop-color="#0A60FF"
                                            offset="100%"
                                        />
                                    </linearGradient>
                                    <linearGradient
                                        x1="-19.8191553%"
                                        y1="-36.7931464%"
                                        x2="138.57919%"
                                        y2="157.637507%"
                                        id="linearGradient-2"
                                    >
                                        <stop
                                            stop-color="#29CDFF"
                                            offset="0%"
                                        />
                                        <stop
                                            stop-color="#0F78FF"
                                            offset="100%"
                                        />
                                    </linearGradient>
                                    <linearGradient
                                        x1="68.1279872%"
                                        y1="-35.6905737%"
                                        x2="30.4400914%"
                                        y2="114.942679%"
                                        id="linearGradient-3"
                                    >
                                        <stop
                                            stop-color="#FA8E7D"
                                            offset="0%"
                                        />
                                        <stop
                                            stop-color="#F74A5C"
                                            offset="51.2635191%"
                                        />
                                        <stop
                                            stop-color="#F51D2C"
                                            offset="100%"
                                        />
                                    </linearGradient>
                                </defs>
                                <g
                                    id="Vue"
                                    stroke="none"
                                    stroke-width="1"
                                    fill="none"
                                    fill-rule="evenodd"
                                >
                                    <g
                                        id="Group"
                                        transform="translate(19.000000, 9.000000)"
                                    >
                                        <path
                                            d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281"
                                            id="Path-Copy"
                                            fill="url(#linearGradient-1)"
                                            fill-rule="nonzero"
                                            transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "
                                        />
                                        <path
                                            d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561"
                                            id="Path"
                                            fill="url(#linearGradient-2)"
                                            fill-rule="nonzero"
                                        />
                                        <path
                                            d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z"
                                            id="Path"
                                            fill="url(#linearGradient-3)"
                                        />
                                    </g>
                                </g>
                            </svg>
                        </div>

                        <span>
                            <p>Search &nbsp;by</p>
                            <img :src="nebula" alt="" />
                        </span>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import routingQuery from "./routingQuery.vue";
export default {
    name: "routerHeader",
    data() {
        return {
            picture: require("@/assets/logo.png"),
            pictures: require("@/assets/purplelogo.png"),
            nebula: require("@/assets/nebula.png"),
            RouterNameGeometry: "", //input => Value
            isActive: false, //搜索展示
            routerList: [], //路由集合
            listGeometry: {}, //查询后
        };
    },
    components: { routingQuery },
    created() {
        //点击弹框 input 以外的地方关闭弹框;
        document.addEventListener("click", (e) => {
            let box = document.getElementById("moreBox");
            let input = document.getElementById("input");
            if (!box.contains(e.target) && !input.contains(e.target)) {
                this.isActive = false;
            }
        });

        this.setRouter();
    },
    //input 防抖
    watch: {
        RouterNameGeometry: {
            deep: true,
            handler(newVal, oldVal) {
                this.debounce(this.searchVal, 600);
            },
        },
    },
    methods: {
        debounce(Fun, wait) {
            if (this.timer !== null) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(Fun, wait);
        },
        //触发左侧更新
        updateRef() {
            this.$parent.$refs.nav.handlerUpdate();
        },
        //递归生成左侧菜单 => 查询使用
        setRouter() {
            var that = this;
            function getId(routers, routerList) {
                routers.forEach((item) => {
                    if (item.meta.isPointer) {
                        that.routerList[item.name] = item.meta.title;
                    }
                    if (item.children && item.children.length > 0) {
                        getId(item.children, routerList);
                    }
                });
            }
            getId(this.$router.options.routes, that.routerList);
        },

        //大小写处理
        toLowerCaseVal(arg) {
            let str = "";
            for (let i = 0; i < arg.length; i++) {
                str += arg[i].toLowerCase();
            }
            return str;
        },
        //全局路由搜索
        searchVal() {
            if (this.RouterNameGeometry.length > 0) {
                //存在 => 遮罩层显示
                this.isActive = true;
                //创建路由集合
                let routingSet = {};
                for (let i in this.routerList) {
                    if (
                        this.toLowerCaseVal(this.routerList[i]).indexOf(
                            this.toLowerCaseVal(this.RouterNameGeometry)
                        ) > -1
                    ) {
                        routingSet[i] = this.routerList[i];
                    }
                }
                console.log(routingSet);
                //相匹配条件 =>赋值
                if (routingSet && Object.keys(routingSet).length > 0) {
                    this.listGeometry = routingSet;
                //未匹配 =>清空
                } else {
                    this.listGeometry = {};
                }
            }
        },
    },
};
</script>

<style scoped>
header {
    display: flex !important;
    height: 60px;
    width: 100%;
    align-items: center;
    line-height: 60px;
    background-color: #001938;
    border-bottom: 1px solid #ccc;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

#search {
    margin-top: 43px;
}

header:hover {
    box-shadow: rgb(11, 234, 235) 0px 0px 15px inset;
}
header img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-left: 20px;
}

.arise-east-nav-item {
    width: 250px;
    height: 40px;
    display: flex;
    align-items: center;
    border-right: 1px solid #ffffff;
    overflow: hidden;
}

.arise-east-nav-seach {
    display: flex;
    margin-left: 20px;
    flex: 1;
}

.arise-east-nav-seach input {
    height: 60px;
    width: 50%;
    color: #fff;
    font-size: 14px;
    background-color: transparent;
    border: none;
    outline: none;
}

.arise-east-nav-icon {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: right;
}

.arise-east-nav-icon svg {
    cursor: pointer;
    margin-right: 20px;
}

.ds-Template {
    position: fixed;
    left: 265px;
    top: 60px;
    z-index: 999;
    border-radius: 5px;
    min-width: 500px;
    max-width: 500px;
    max-height: 200px;
    overflow-y: auto;
    min-height: 200px;
    box-shadow: 0 2px 10px #ccc;
    background-color: #fff;
}
.Documentation {
    min-width: 500px;
    max-width: 500px;
    z-index: 9999;
    font-weight: bold;
    padding: 10px;
    position: fixed;
    background-color: white;
    border-bottom: 1px solid #ccc;
}

.ds-layout {
    display: flex;
}

.ds-svg {
    margin-top: 60px;
    border-left: 1px solid #ccc;
    position: fixed;
    left: 537px;
    top: 50px;
}

.ds-svg div {
    display: flex;
    align-items: center;
}
.ds-svg img {
    width: 70px;
    height: 70px;
    margin-left: 15px;
}

.ds-svg .ds-formHome {
    margin: 0 10px;
}

.ds-svg span {
    display: flex;
    align-items: right;
    margin-top: 35px;
}

.ds-svg span p {
    font-weight: bold;
    height: 25px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    margin-left: 50px;
    margin-top: 3px;
    /* margin: 10px 15px; */
    color: rgb(158, 155, 155);
}

.ds-Template span img {
    width: 80px;
    height: 20px;
    margin: 0 10px;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}
</style>